<template>
  <div class="bg-white rounded-lg w-full shadow-xl dialog-enter">
    <div class="bg-primary px-6 py-4 rounded-t-lg flex justify-between items-center"
      style="background-color: #64B5F6 !important;">
      <h2 class="text-white text-lg font-medium">AI 对话记录</h2>
      <button class="text-white hover:text-gray-200 text-xl" @click="closeDialog">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="h-[500px] overflow-y-auto p-6">
      <div class="space-y-6">
        <div v-for="(chat, index) in chatHistory" :key="index" class="flex items-start gap-4">
          <div class="text-sm text-gray-500 whitespace-nowrap">{{ formatDate(chat.time) }}</div>
          <div class="flex-1">
            <div v-for="(message, msgIndex) in chat.messages" :key="msgIndex" class="flex items-start gap-3 mb-4">
              <img :src="message.avatar" class="rounded-full w-10 h-10 object-cover" />
              <div class="flex-1">
                <div class="text-sm text-gray-600 mb-1">{{ message.sender }}</div>
                <div class="bg-blue-50 p-4 rounded-lg relative group">
                  {{ message.text }}
                  <button class="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
                    <i class="fas fa-copy text-gray-400 hover:text-primary"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="px-6 py-4 flex justify-between items-center" style="border-top: 1px solid #d1d5db;">
      <div class="text-gray-600">共 {{ chatHistory.length }} 条对话记录</div>
      <div>
        <button class="px-4 py-2 bg-primary text-white !rounded-button whitespace-nowrap btn-hover" @click="closeDialog">
          关闭
        </button>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟的聊天记录数据
const chatHistory = ref([
  {
    time: '2024-01-20 14:30',
    messages: [
      {
        sender: '张伟峰',
        text: '请帮我分析一下最近的市场趋势，重点关注AI领域的发展方向。',
        avatar: 'https://ai-public.mastergo.com/ai/img_res/417eb824fedfcf54ee4609d84e19a3a7.jpg',
      },
      {
        sender: 'AI 助手',
        text: '根据最新数据分析，AI领域呈现快速增长趋势。主要表现在：\n1. 大语言模型技术持续突破\n2. AI辅助决策系统在企业中广泛应用\n3. 智能制造领域AI解决方案需求旺盛\n4. AI医疗诊断准确率显著提升\n建议关注：算力基础设施、专业AI人才培养、产业链协同等方向。',
        avatar: 'https://mastergo.com/ai/api/search-image?query=a modern AI assistant robot head&width=40&height=40&orientation=squarish',
      },
    ],
  },
  {
    time: '2024-01-20 14:35',
    messages: [
      {
        sender: '张伟峰',
        text: '这个分析很有帮助，能具体说说AI在医疗领域的应用案例吗？',
        avatar: 'https://mastergo.com/ai/api/search-image?query=a professional portrait photo&width=40&height=40&orientation=squarish',
      },
      {
        sender: 'AI 助手',
        text: 'AI在医疗领域的应用非常广泛，以下是几个典型案例：\n1. 影像诊断：AI可快速分析CT、核磁共振等医学影像，辅助医生发现病变\n2. 药物研发：通过机器学习加速新药研发流程，提高成功率\n3. 智能问诊：基于自然语言处理的初筛问诊系统，提高医疗资源利用效率\n4. 手术规划：AI辅助手术方案制定，提供精准化治疗建议\n这些应用显著提升了医疗效率和准确率。',
        avatar: 'https://mastergo.com/ai/api/search-image?query=a modern AI assistant robot head with blue glowing elements&width=40&height=40&orientation=squarish',
      },
    ],
  },
])
// 日期格式化方法
const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`; // 返回 yyyy-mm-dd 格式
};
// 关闭弹窗的方法
const closeDialog = () => {
  // 在这里可以实现关闭弹窗的逻辑，譬如关闭父组件传递的状态，或者直接隐藏该弹窗
  console.log('关闭对话记录弹窗')
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #1E90FF;
  border-radius: 3px;
}

.dialog-enter {
  animation: dialogEnter 0.3s ease-out;
}

@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.btn-hover:hover {
  transform: scale(1.02);
  transition: transform 0.2s;
}
</style>
